<template>
  <div class="Container">
    <el-container style=" border: 1px solid #eee">
      <el-header style="text-align:right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <!--<el-dropdown-menu slot="dropdown">-->
            <!--<el-dropdown-item>查看</el-dropdown-item>-->
            <!--<el-dropdown-item>新增</el-dropdown-item>-->
            <!--<el-dropdown-item>删除</el-dropdown-item>-->
          <!--</el-dropdown-menu>-->
        </el-dropdown>
        <span>{{Name}}</span>
        <span @click="logout">退出</span>
      </el-header>
      <el-container>
      <el-aside width="13vw" style="background-color:#6a6a6a;overflow:hidden">
          <el-menu
              default-active="1-1"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-news"></i>
                <span @click="showUpload=true">用户管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="goTeacher()">教师表</el-menu-item>
                <el-menu-item index="1-2" @click="goStudent()">学生表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="2" @click="goClass()">
              <i class="el-icon-menu"></i>
              <span slot="title">班级管理</span>
            </el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-edit-outline"></i>
                <span>作业管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1" @click="goPush()">发布历史</el-menu-item>
                <el-menu-item index="3-2" @click="goCommit()">上交历史</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>其他功能</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="4-1">选项1</el-menu-item>
                <el-menu-item index="4-2">选项2</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            </el-menu>
      </el-aside>
        <el-container >
            <el-main >
              <div style="position:relative">
              </div>
          <router-view></router-view>
        </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
    <style>
      
      .addC{
        font-size: 14px;
        width: 650px;
        transition: all 0.5s;
      }
      .el-submenu__title{
        color:#e7e7e7
      }
      .Container{
        margin:0 auto;
        width: 90%;
      }
      .Container .showUpload{
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
      }
      .showUploadCt{
      }
      .el-menu-item{
        color:#e7e7e7
      }
      .el-menu-item.is-active{
        color:#c6c6c6
      }
      .head{
        height:80px;
        border: 1px solid #e4e8f1;
        margin-bottom:1% ;
        line-height: 80px;
      }
      .el-autocomplete{
        margin: 3% 0 10px 0%;
      }
      .el-header {
        background-color: #434343;
        color: #c6c6c6;
        line-height: 60px;
      }
      .el-aside {
        color: #6a6a6a;
      }
      .stuInput,.teacherInput{
        position: absolute;
        left: 0;
        width: 20%;
        opacity: 0
      }
      .el-menu{
        background:#6a6a6a
      }
      .el-submenu__icon-arrow{
        right:5px;
      }
      #uTeacher .el-dialog__body{
        padding: 0 0 0 0;
      }
      .el-dialog{
        border-radius: 0.5vw
      }
      .el-dialog__body{
      padding: 0 0 0 0;
    }
    .el-dialog__header{
        padding-bottom: 0px
      }
      .el-table th {
        background: rgb(248, 248, 248);
        padding:0;
      }
      .el-table td{
        padding: 0;
      }
      .el-main {
        padding:0 0 0 2vw;
        background: #eee;
        height:40vw
      }
       ::-webkit-scrollbar {
		  width: 9px;
	}
    ::-webkit-scrollbar-track {
		  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); 
	}
    ::-webkit-scrollbar-thumb {
          background: rgba(0,0,0,0.1);
          border-radius: 8px
	}
    </style>
    <script>
    import axios from 'axios'
      export default {
        data() {
          return {
            addSrc:'/src/assets/closeL.png',
            addTittle:'添加',
            selected:"选择类型",
            exName:'未选择',
            uploadBtn:"导入学生表",
            visible2: false,
            showUpload:true,
              Name:"高伟廷",
              upath: '',
              userRoot: '',
          }
        },
        created:function(){
          if(localStorage.itRoot==1||localStorage.itRoot==3){

             }else{
             this.$message({
                type: 'warning',
                message: '非管理员不能进入'
            });
            this.$router.push({path:'/'});
          }
        },
        methods:{
          changeType(){
            alert(this.value)
          },
          addC(){
            switch (this.$refs.addC.style.width){
                    case "50px":
                    console.log(this.$refs.addC.style.opacity)
                    this.$refs.op.style.display="block";
                    this.$refs.op.style.opacity="1.0";
                    this.$refs.addC.style.width="650px";
                    this.$refs.addC.style.borderBottom="1px solid gray";
                    this.$refs.addTittle.style.opacity="0.0"
                    this.$refs.addTittle.style.right="0px"
                    this.addTittle="..."
                    this.addSrc="/src/assets/closeR.png"
                   /* this.$refs.addC.style.opacity="1.0";*/
                    console.log(this.$refs.addC.style.opacity)
                    break;
                    case "650px":
                    this.$refs.op.style.opacity="0.0";
                    this.$refs.addC.style.width="50px";
                    this.$refs.addTittle.style.opacity="1.0"
                    this.$refs.addTittle.style.right="15px"
                    this.addTittle="添加"
                    this.addSrc="/src/assets/closeL.png"
                    this.$refs.addC.style.borderBottom="1px solid #eee";
                }
          },
           logout(){

               this.$router.push({path:'/'});
               localStorage.removeItem("userID");
               localStorage.removeItem("userName");
             },
          goTeacher(){
            var params = new URLSearchParams();
                params.append('root',"2");
            var _this = this
            axios.post('/users/userShow',params).then(function(res){
              console.log("老师信息",res.data);
              var t_users=res.data.allUserArray;
              var t_users=JSON.stringify(t_users);
              _this.$router.push({path:'/uTeacher',query:{t_users:t_users}});
              console.log(t_users);
            }).catch(function (err) {
                  console.log(err);
            });
          },
          goStudent(){
            var params = new URLSearchParams();
                params.append('root',"4");
            var _this = this
            axios.post('/users/userShow',params).then(function(res){
              console.log(res.data);
              var t_users=res.data.allUserArray;
               var t_users=JSON.stringify(t_users);
              _this.$router.push({path:'/uStudent',query:{t_users:t_users}});
            }).catch(function (err) {
                  console.log(err);
            });
          },
          goClass(){
            this.$router.push('/Class_M')
          },
          goPush(){
            this.$router.push('/PushHistory')
          },
          goCommit(){
             this.$router.push('/CommitHistory')
          },
          submitUpload() {
            this.$refs.upload.submit();
          },
           upload: function () {
           // console.log(this.upath);
              var zipFormData = new FormData();
              zipFormData.append('filename', this.upath);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
              zipFormData.append('itRoot',this.userRoot);
              //let config = { headers: { 'Content-Type': 'multipart/form-data' } };
              var _this = this;
              axios.post('/users/Excel_register', zipFormData).then(function (res) {
                 alert(res.data.msg);
                console.log(res.data);
                console.log(res.bodyText);     
              }).catch(function (err) {
                  /*console.log(err);*/
              });
          },
          getFile: function (even,theRoot) {
            this.upath = event.target.files[0];
            this.userRoot=theRoot;
            /*console.log(this.userRoot);
            console.log(this.upath);*/
            this.uploadBtn="重新导入";
            var nameArr=this.$refs.file.value.split('\\');
            var filenameTask=nameArr[nameArr.length-1]; 
            this.exName=filenameTask;
            console.log(this.exName);
          },
        }
      };
    </script>